<template>
  <div class="curve-container">
    <el-row>
      <el-col :span="16">
        <div id="chart-box" class="chart-container" />
        <div>
          <el-radio-group v-model="radio1" @change="getData">
            <el-radio-button label="FAM" />
            <el-radio-button label="HEX" />
          </el-radio-group>
          <el-radio-group v-model="radio2" style="float:right;" @change="getData">
            <el-radio-button label="扩增曲线" />
            <el-radio-button label="熔解曲线" />
          </el-radio-group>
        </div>
      </el-col>
      <el-col :span="8">
        <table>
          <tr v-for="item in 8" :key="item">
            <td
              class="titleBg"
              :class="{ selected: selectedList[item - 1] === true }"
              @click="handleClick(item)"
            >
              A{{ item }}
            </td>
            <td>{{ ctStr[item - 1] }}</td>
            <td
              class="titleBg"
              :class="{ selected: selectedList[item + 7] === true }"
              @click="handleClick(item + 8)"
            >
              B{{ item }}
            </td>
            <td>{{ ctStr[item - 1 + 8] }}</td>
          </tr>
        </table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { qpcrreportProvider } from '@/api/api'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      id: '',
      ct: [],
      ctStr: [],
      colors: [
        'red',
        '#FFC0CB',
        '#FFA500',
        'yellow',
        '#32CD32',
        'cyan',
        '#4169E1',
        '#EE82EE',
        '#8B0000',
        '#FF1493',
        '#D2691E',
        '#ADFF2F',
        '#006400',
        '#008B8B',
        '#00008B',
        '#800080'
      ],
      selectedList: [
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true
      ],
      chart: null,
      options: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: []
        },
        xAxis: {
          type: 'category'
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          // {
          //   data: [150, 230, 224, 218, 135, 147, 260],
          //   type: 'line'
          // }
        ]
      },
      radio1: 'FAM',
      radio2: '扩增曲线',
      typeMap: {
        FAM扩增曲线: 1,
        HEX扩增曲线: 2,
        FAM熔解曲线: 3,
        HEX熔解曲线: 4
      }
    }
  },
  computed: {
    type() {
      return this.typeMap[this.radio1 + this.radio2]
    }
  },
  mounted() {
    this.chart = echarts.init(document.getElementById('chart-box'))

    this.id = this.$route.params.id
    this.getData()
  },
  methods: {
    getData() {
      qpcrreportProvider
        // .curve({ id: '1624633164955480065', type: 2 })
        .curve({ id: this.id, type: this.type })
        .then(res => {
          console.log(res)
          if (res.code === 0) {
            this.ct = res.data.ct
            this.ctStr = this.ct.map(_ => {
              if (_ > 0) {
                return '+ ' + _
              } else if (_ < 0) {
                return _
              }
              return _
            })
            const dataY = res.data.dataY
            this.options.color = this.colors
            this.options.series = dataY.map((_, index) => {
              return {
                type: 'line',
                data: _,
                name: index + 1 + ''
              }
            })

            const dataX = []
            for (let i = 0; i < dataY[0].length; i++) {
              dataX.push(i + 1)
            }
            for (let i = 0; i < 16; i++) {
              this.options.legend.data.push('' + (i + 1))
            }
            this.options.xAxis.data = dataX

            this.chart.setOption(this.options)
          }
        })
    },
    handleClick(val) {
      // console.log(val)
      this.$set(this.selectedList, val - 1, !this.selectedList[val - 1])
      // this.selectedList[val - 1] = !this.selectedList[val - 1]
      this.chart.dispatchAction({ type: 'legendToggleSelect', name: '' + val })
      // this.chart.dispatchAction({ type: 'legendToggleSelect', name: '3' })
      // console.log(this.selectedList)
    }
  }
}
</script>

<style lang="scss" scoped>
.curve-container {
  height: 700px;
  .el-row,
  .el-col {
    height: 650px;
  }
  .chart-container {
    width: 100%;
    height: 650px;
  }
}
</style>
<style lang="scss">
.curve-container {
  table,
  td,
  th {
    border: 1px solid black;
  }
  td:nth-child(odd) {
    width: 50px;
  }
  td:nth-child(even) {
    width: 100px;
  }
  table {
    margin: 50px 0 0 20px;
    border-collapse: collapse;
    text-align: center;
  }

  tr:nth-child(1) {
    td:nth-child(1) {
      background-color: red;
    }
    td:nth-child(3) {
      background-color: #8b0000;
    }
  }
  tr:nth-child(2) {
    td:nth-child(1) {
      background-color: #ffc0cb;
    }
    td:nth-child(3) {
      background-color: #ff1493;
    }
  }
  tr:nth-child(3) {
    td:nth-child(1) {
      background-color: #ffa500;
    }
    td:nth-child(3) {
      background-color: #d2691e;
    }
  }
  tr:nth-child(4) {
    td:nth-child(1) {
      background-color: yellow;
    }
    td:nth-child(3) {
      background-color: #adff2f;
    }
  }
  tr:nth-child(5) {
    td:nth-child(1) {
      background-color: #32cd32;
    }
    td:nth-child(3) {
      background-color: #006400;
    }
  }
  tr:nth-child(6) {
    td:nth-child(1) {
      background-color: cyan;
    }
    td:nth-child(3) {
      background-color: #008b8b;
    }
  }
  tr:nth-child(7) {
    td:nth-child(1) {
      background-color: #4169e1;
    }
    td:nth-child(3) {
      background-color: #00008b;
    }
  }
  tr:nth-child(8) {
    td:nth-child(1) {
      background-color: #ee82ee;
    }
    td:nth-child(3) {
      background-color: #800080;
    }
  }
  .titleBg {
    cursor: pointer;
    opacity: 0.5;
    &.selected {
      opacity: 1;
    }
  }
}
</style>
